<template>
  <div class="container">
    <h1>介绍css文本</h1>
    <Card>
      <p class="text-underline">下划线文本</p>
      <p class="text-overline">下划线文本</p>
      <p class="text-underline">下划线文本</p>
    </Card>
    <pre><code class="css">
<p>文本转换大小写</p>          
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}          
      </code> </pre>
    <Table :columns="columns1" :data="cssTextData"> </Table>
  </div>
</template>

<script>
export default {
  name: "CssText",
  data() {
    return {
      columns1: [

        {
          title: "属性",
          key: "property"
        },
        {
          title: "描述",
          key: "details"
        }
      ],
      cssTextData: []
    };
  },
  methods: {

  },
  mounted() {
    this.$axios
      .get(
        "https://www.easy-mock.com/mock/5d86e9880607dd3ce3b26cc7/css_tutorial/css-text"
      )
      .then(res => {
          this.cssTextData=res.data.data
      });
  }
};
</script>

<style scoped>
.text-overline {
  text-decoration: overline;
  direction: rtl;
}
.text-underline {
  text-decoration: underline;
  letter-spacing: 3px;
}


</style>
